<script setup></script>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
  name: "Home",
  setup() {
    const message = ref("");

    return {
      message,
    };
  },
  data: () => {
    return {
      url: 'http://127.0.0.1:8000/plates/download?image_name=',
      plates: [],
      selectedDate: "",
      selectedProvince: "",
      showProvinceDropdown: false,

      dailyRecords: [],
      provinceRecords: [],
      currentPage: "home", // 确保初始值正确
      parkingStatus: "正常",
      activePlates: [],
      showDailyNotFound: false,
      showProvinceNotFound: false,
      feeSettings: {
        feeWithin1Hour: 5, // 默认值
        feeAfter1Hour: 2, // 默认值
        feeWithin24Hours: 50, // 默认值
      },
      selectedDateRange1:
        new Date().getFullYear() +
        "-" +
        (new Date().getUTCMonth() + 1) +
        "-" +
        new Date().getUTCDate(),
      selectedDateRange2:
        new Date().getFullYear() +
        "-" +
        (new Date().getUTCMonth() + 1) +
        "-" +
        new Date().getUTCDate(),
    };
  },
  methods: {
    async fetchPlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.plates = response.data.plates;
      } catch (error) {
        console.error("获取车牌记录失败:", error);
      }
    },

    async fetchActivePlates() {
      try {
        const response = await axios.get("http://localhost:8000/plates/active");
        this.activePlates = response.data.plates;
      } catch (error) {
        console.error("获取车位状态失败:", error);
      }
    },
  },
  created() {
    this.fetchPlates();
    this.fetchActivePlates();

    setInterval(this.fetchActivePlates, 5000);
    setInterval(this.fetchPlates, 2000);  // 添加这行代码，每2秒刷新一次
  },
};
</script>

<template>
  <div style="height: 100%">
    <div>
      <h1 class="text-center mb-4">当前车辆</h1>
      <!-- 修改标题 -->
      <div class="table-responsive">
        <table class="table table-striped table-hover">
          <thead class="table-dark">
            <tr>
              <th scope="col">车牌号</th>
              <th scope="col">进入时间</th>
              <th scope="col">入场照片</th>
              <!-- 删除离开时间列 -->
            </tr>
          </thead>
          <tbody>
            <tr v-for="plate in plates" :key="plate.id">
              <td>{{ plate.plate_number }}</td>
              <td>{{ plate.enter_time }}</td>
              <!-- <td><img :src="url + plate.filename" style="height: 60px;width: 150px;"></td> -->
              <td><el-image style="height: 60px;width: 150px;" :src="url + plate.filename" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="[url + plate.filename]" show-progress :initial-index="4"
                  fit="cover" /></td>
              <!-- 删除离开时间列 -->
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
